<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { control } from '@/pinia/modules/control';
  import { storeToRefs } from 'pinia';
  const usecontrol = control();
  const { isFloatDialog, isCollapse } = storeToRefs(usecontrol);
  const props = defineProps({
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array<number>,
      default:()=>{
        return [10, 20, 30, 50, 100]
      }
    },
    background: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  });
  const $emit = defineEmits(['update:page','update:limit','pagination']);
  const currentPage = computed({
    get() {
      return props.page
    },
    set(val) {
      $emit('update:page', val)
    }
  });
  const pageSize = computed({
    get() {
      return props.limit
    },
    set(val) {
      $emit('update:limit', val)
    }
  });
  const layout = computed(()=>{
    const { value:isFloat } = isFloatDialog
    if(isFloat) return 'total, prev, pager, next'
    return 'total, sizes, prev, pager, next, jumper'
  })
  const handleSizeChange = (val:number = 1) => {
    $emit('pagination', { page: currentPage, limit: val })
  };
  const handleCurrentChange = (val:number = 1) => {
    $emit('pagination', { page: val, limit: pageSize })
  }
</script>

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :layout="layout"
      :page-sizes="[...pageSizes,total]"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 20px 10px 10px;
  box-sizing: border-box;
}
.pagination-container.hidden {
  display: none;
}
</style>
